在Vue中实现全屏背景图片 |
您所在的位置：网站首页 › 潮流背景图 全屏 › 在Vue中实现全屏背景图片 |
在Vue中实现全屏背景图片
|
在Vue中实现全屏背景图片
解决方案
解决方案
background: url("../xx/images/图片名字.jpg"); //这里的地址是用你项目中图片所在的路径为准
background-repeat: no-repeat;//将图片样式不重复
background-size: 100% 100%; //设置图片大小
position: fixed; /* 充满全屏 */
height: 100%; //设置div高度
width: 100%; //设置div宽度
上述css代码请放在你的div中的id选择器中。 如： 在上述代码中，我们要放在building中 #building{ background:url("./assets/Books.png"); width:100%; height:100%; position:fixed; background-size:100% 100%; }例：
彻底解决方案： 前端解决：数据所在的div或table设置滚动条 后端解决：加数据分页且前端渲染。 |
缺点：因为全局背景设置成fixed固定定位，所以如果页面数据太多且没有设置分页或滚动条时，则无法进行下滑操作 临时解决方案：可以使用absolute或relative，然后height设置成auto自动【本文地址】